DHTML Menus

Ektron CMS400.NET’s Menu feature lets users create and maintain a dropdown menu system for your Web site. The Menu feature lets you display menu options that link to content blocks, library assets, external hyperlinks and submenus.

To learn more about menus, see Working with Menus.

Additional Documentation in Ektron Knowledge Base

This chapter explains how to implement standard menus that ship with Ektron CMS400.NET. Ektron’s Web site also provides Knowledge Base articles that explain how to extend the standard menu features.

Displaying a Menu on a Web Page

GenerateMenu and DropMenu

Warning! The menu functions described below are only one example of how to implement menus. You can implement your own menu system using JavaScript.

Use the GenerateNextGenMenu and DropNextGenMenu custom functions to display a DHTML menu on a Web page. Place GenerateNextGenMenu once on the page to provide an infrastructure for DropNextGenMenu. Then, place DropNextGenMenu as needed to implement individual menus.

Follow these steps to display a menu on a Web template.

1. Place the following code directly after the page’s <body> tag.

<CFMODULE Ids=”menu id number” template="#request.ecm.AppPath#ecmDHTML_GenerateNextGenMenu.cfm">

For example:

           <CFMODULE Ids="1" template="#request.ecm.AppPath#ecmDHTML_GenerateNextGenMenu.cfm">

To display more than one menu, separate each id number with a comma. For example:

       <CFMODULE Ids="1,2,3" template="#request.ecm.AppPath#ecmDHTML_GenerateNextGenMenu.cfm">

2. If the user clicks text to display the menu, place the following code within the template file where the text would appear.

<CFMODULE MenuId="menu id number" Title="text user clicks to display menu" template="#request.ecm.AppPath#ecmDHTML_DropNextGenMenu.cfm">

For example:

<CFMODULE MenuId="1" Title="Products" template="#request.ecm.AppPath#ecmDHTML_DropNextGenMenu.cfm">

If the user clicks a graphic to invoke the menu, use this syntax:

<CFMODULE MenuId="menu id number" Title= '<img src=graphic file name>' template="#request.ecm.AppPath#ecmDHTML_DropNextGenMenu.cfm">

For example:

<CFMODULE MenuId="1" Title= '<img src=mymenugraphic.jpg>' template="#request.ecm.AppPath#ecmDHTML_DropNextGenMenu.cfm">

Customizing the Menu’s Appearance

You can customize a menu’s appearance, such as the font style, color, and size. So, you have the flexibility to coordinate a menu with the design your Web site.

To customize a menu in Ektron CMS400.NET, you can change the ek_Menu.js file.

ek_Menu.js

You can change the look and feel of a menu by changing the ek_menu.js file. If you used the default settings when installing Ektron CMS400.NET, this file is in webroot/CMS400Developer/Workarea/java/. For a description of the ek_menu.js file, see ek_Menu.js.

Previous TopicNext Topic|